::v-deep(.el-progress-bar__outer) {
  background-color: rgba(38, 42, 77, 1);
}

::v-deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, rgba(0, 132, 244, 0.40) 0%, rgba(0, 132, 244, 1) 80%);
}

.device-enter-active,
.device-leave-active {
  transition: opacity 750ms ease, transform 750ms ease;
}

.device-enter-from {
  opacity: 0;
  transform: translateY(20rem);
}

.device-leave-to {
  opacity: 0;
  transform: translateY(-20rem);
}

.page-wrap {
  height: 100%;
  background: #232438;
  box-sizing: border-box;
  overflow: hidden;

  .page-box {
    height: 800rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page-body {
    padding: 25rem 25rem;

    .body-box {
      position: relative;

      .body-list {
        position: absolute;

        .body-list-box {
          display: flex;
          flex-wrap: wrap;

          .body-item {
            min-width: 364rem;
            max-width: 364rem;
            height: 296rem;
            cursor: pointer;
            flex: 1;
            margin: 5rem;
            padding: 15rem 15rem 15rem 15rem;
            box-sizing: border-box;
            background: #30324E;
            border-radius: 15rem;
            border: 2rem solid #00D08F;

            .item-top {
              display: flex;

              .top-left {
                display: flex;
                flex: 0;
                flex-basis: 170rem;

                .left-img {
                  flex: 0;
                  flex-basis: 40rem;
                  border-radius: 8rem;

                  .img-logout {
                    width: 40rem;
                    height: 40rem;
                  }
                }

                .left-content {
                  margin-left: 5rem;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  width: 50rem;

                  .content-top {
                    display: flex;
                    justify-content: space-between;

                    .content-name {
                      font-weight: 600;
                      font-size: 18rem;
                      color: #FFFFFF;
                      line-height: 20rem;
                      text-align: left;
                      overflow:hidden;
                      text-overflow:ellipsis;
                      white-space:nowrap;
                    }

                    .content-name-scroll {
                      display: inline-block;
                      white-space: nowrap;
                      will-change: transform;
                      animation: scroll-left-right 25s linear infinite;
                    }

                    .content-type {
                      margin: 3rem 0 2rem 10rem;
                      padding: 3rem 5rem;
                      background: #DF5B02;
                      border-radius: 4rem;
                      font-weight: 400;
                      font-size: 10rem;
                      color: #FFFFFF;
                      line-height: 15rem;
                    }
                  }

                  .content-bottom {
                    font-family: BebasNeue-Regular, BebasNeue-Regular, serif;
                    font-weight: 400;
                    font-size: 14rem;
                    color: #FFFFFF;
                    line-height: 22rem;
                    text-align: left;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }

                  .content-bottom-scroll {
                    display: inline-block;
                    white-space: nowrap;
                    will-change: transform;
                    animation: scroll-left-right 25s linear infinite;
                  }

                  @keyframes scroll-left-right {
                    0% {
                      transform: translateX(5%);
                    }
                    50% {
                      transform: translateX(-80%);
                    }
                    100% {
                      transform: translateX(5%);
                    }
                  }
                }
              }

              .top-middle {
                margin-left: 5rem;
                border-left: 1rem solid rgba(255, 255, 255, 0.1);
                padding-left: 5rem;
                flex: 1;
                display: flex;
                justify-content: space-between;
                flex-direction: column;

                .middle-top {
                  font-weight: 400;
                  font-size: 12rem;
                  color: #FFFFFF;
                  line-height: 14rem;
                  text-align: left;
                  position: relative;

                  .middle-top-name {
                    display: inline-block;
                    white-space: nowrap;
                    will-change: transform;
                    animation: scroll-left-right 25s linear infinite;
                  }

                  @keyframes scroll-left-right {
                    0% {
                      transform: translateX(5%);
                    }
                    50% {
                      transform: translateX(-50%);
                    }
                    100% {
                      transform: translateX(5%);
                    }
                  }

                  .middle-top-model {
                    font-family: BebasNeue-Regular, BebasNeue-Regular, serif;
                    margin-right: 5rem;
                  }
                }

                .middle-bottom {
                  max-width: 200rem;
                  font-weight: 400;
                  font-size: 12rem;
                  color: #ffffff;
                  line-height: 14rem;
                }
              }

              .top-right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .right-top {
                  display: flex;

                  .right-img {
                    margin: 4rem 0;
                    flex: 0;
                    flex-basis: 22rem;
                    border-radius: 5rem;

                    .img-logout {
                      width: 22rem;
                      height: 22rem;
                    }
                  }

                  .right-name {
                    margin-left: 5rem;
                    font-weight: 500;
                    font-size: 16rem;
                    color: #FFFFFF;
                    line-height: 20rem;
                  }
                }

                .right-bottom {
                  font-weight: 400;
                  font-size: 12rem;
                  color: #897E93;
                  line-height: 14rem;
                }
              }
            }

            .item-bottom {
              margin-top: 15rem;
              border-top: 1rem solid rgba(255, 255, 255, 0.1);
              display: flex;

              .bottom-content {
                flex: 1;

                .item-content {
                  margin-top: 15rem;
                  text-align: center;

                  .item-data {
                    font-family: BebasNeue-Regular, BebasNeue-Regular, serif;
                    font-weight: 400;
                    font-size: 24rem;
                    color: #5B8FF9;
                    line-height: 30rem;
                  }

                  .item-data-content {
                    font-weight: bolder;
                    font-size: 16rem;
                    color: white;
                    line-height: 30rem;
                  }

                  .item-data-small {
                    font-size: 16rem;
                    line-height: 21rem;
                  }

                  .item-title {
                    font-weight: 400;
                    font-size: 14rem;
                    color: #897E93;
                    line-height: 20rem;
                  }
                }
              }

              .bottom-line {
                margin: 10rem 5rem 0 5rem;
                flex: 0;
                flex-basis: 1rem;
                width: 1rem;
                background-color: rgba(255, 255, 255, 0.1);
              }
            }
          }

          .body-item-warning {
            border: 2rem solid #FF7605;
          }

          .body-item-close {
            border: 2rem solid #A9AFB9;
          }
        }
      }
    }
  }
}